<template>
    <div class="fillcontain">
        <el-form :model="formData" :rules="rules" inline="true" ref="formData"
                 class="demo-form-inline" style="margin-left: 20px">
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" @change="schoolchange" style="width: 220px" v-model="formData.schoolid"
                               placeholder="请选择校区">
                        <el-option
                            v-for="item in schoolList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-date-picker
                        size="mini"
                        v-model="formData.month"
                        type="month"
                        value-format="yyyyMM"
                        placeholder="选择月">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-input-number size="mini" v-model="formData.weeknum" :min="1"
                                     label="每周课次"></el-input-number>
                </el-form-item>
            </el-col>
            <el-col>
                <el-button type="primary" @click="initData" size="mini" icon="el-icon-search">搜索</el-button>
            </el-col>
        </el-form>

        <div class="table_container">
            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%">

                <el-table-column
                    property="ename"
                    label="姓名"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    v-for="week in weeks"
                    :prop="week.prop"
                    :label="week.label"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="xiaoji"
                    label="小计"
                    min-width="10%">
                </el-table-column>
            </el-table>
            <el-row>
                <el-col offset="10" :span="10">
                    <el-button type="primary" @click="submitForm('add')">老师数据汇总,确认提交<i class="el-icon-upload el-icon--right"></i></el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../components/headTop'
    import {getUserList, getUserCount, addemployMonthTotal, employMonthTotal} from '@/api/getData'

    export default {
        computed: {
            ...mapGetters(['adminInfo', 'monthsList', 'weeksList', 'schoolList', 'channelList', 'periodList', 'empschoolMap', 'sexList', 'paytypeList', 'subjectList', 'cardList'])
        },
        mounted() {
            if (this.periodList == null) {
                this.getPeriod();
            }
            if (this.empschoolMap == null) {
                this.fillSchoolEmps();
            }
            if (this.schoolList == null) {
                this.getAllSchool();
            }
        },
        data() {
            return {
                weeks: [],
                formData: {
                    weeknum: 0,
                    schoolid: '',
                    month: '',
                },
                tableData: [],
                currentRow: null,
                offset: 0,
                limit: 20,
                count: 0,
                currentPage: 1,
            }
        },
        components: {
            headTop,
        },
        created() {
            // this.initData();
        },
        methods: {
            ...mapActions(['getGiftList', 'getPeriod', 'setEmpschool', 'deleteEmpschool', 'fillSchoolEmps', 'getAllSchool']),
            async submitForm(formName) {
                try {
                    var vs=[];
                    this.tableData.forEach(item=>{
                       const v={};
                       v.eid=item.eid;
                       v.operatorid=this.adminInfo.id;
                       v.totaluser=item.totaluser;
                       v.onclassuser=item.onclassuser;
                       v.attendanceRate=item.attendanceRate;
                       v.month=item.month;
                       vs.push(v);
                    });
                    alert(JSON.stringify(vs));
                    var data = {"data": vs}
                    let result = await addemployMonthTotal(data);
                    if (result.success == true) {
                        this.$message({
                            type: 'success',
                            message: '添加成功'
                        });
                        this.formData = {}
                    }
                } catch (err) {
                    console.log(err);
                }
            },
            async initData() {
                this.weeks=[];
                for (var i = 0; i < this.formData.weeknum; i++) {
                    const week = {};
                    week.prop = "weekno" + (i + 1);
                    week.label = "第" + (i + 1) + "周";
                    this.weeks.push(week);
                }
                //alert(JSON.stringify(this.formData))
                const v = await employMonthTotal({"data": this.formData});
                this.tableData = [];
                if (v.success == true) {
                    var list = v.data;
                    list.forEach(item => {
                        const tableData = {};
                        tableData.eid = item.eid;
                        tableData.ename = item.ename;
                        tableData.weekno1 = item.weekno1;
                        tableData.weekno2 = item.weekno2;
                        tableData.weekno3 = item.weekno3;
                        tableData.weekno4 = item.weekno4;
                        tableData.weekno5 = item.weekno5;
                        tableData.month=item.month;
                        tableData.totaluser = item.totaluser;
                        tableData.onclassuser = item.onclassuser;
                        tableData.attendanceRate = item.attendanceRate;
                        tableData.xiaoji=tableData.totaluser+","+tableData.onclassuser+","+tableData.attendanceRate
                        this.tableData.push(tableData);
                    })
                }

            },
            schoolchange(schoolid) {
                var v = this.empschoolMap;
                var list = v[schoolid];
                this.empsList = [];
                if (list != null) {
                    list.forEach(item => {
                        this.empsList.push(item);
                    });
                }
            }
        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }
</style>
